<template>
    <div class="clue-list">
        <div class="nav-back" @click="goBack">
            <i class="el-icon-arrow-left"></i>
        </div>
        <div class="clue-box">
            <div class="marg-B2 flex f-wp">
				<div class="items" :class="labelValue.indexOf(childItem.category_id) > -1 ? 'active':''" v-for="childItem in dataList" :key="childItem.category_id" @click="itemCLick(childItem)">{{childItem.category_title}}</div>
                
			</div>
        </div>
        <div class="btn-box">
            <el-button class="btn gray marg-R3" @click="cancelClick">取消</el-button>
            <el-button class="btn b-bg" type="primary" @click="handleCheckedSure">确认</el-button>
        </div>
    </div>
</template>
<script>
import {request} from "@/assets/js/utils/request"
import mixin from '@/assets/js/mixin'
export default {
    mixins: [mixin],
    data() {
        return {
            dataList: [],
            activeIndex: '',
            labelValue: [],
        }
    },
    created() {
        this.initData()
    },
    methods: {
        cancelClick() {
            this.labelValue = []
            this.goBack()
        },
        itemCLick(params) {
            let labeLIndex = this.labelValue.indexOf(params.category_id);
            if (labeLIndex > -1) {
                this.labelValue.splice(labeLIndex, 1);
            } else {
                this.labelValue.push(params.category_id)
            }
        },
        handleCheckedSure() {
            const formData = new FormData();
            formData.append('category_id',this.labelValue);
            request({
                url: '/user/push/category',
                method: 'POST',
                data: formData
            }).then(res => {
                if(res.code == 200) {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.goBack()
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        initData() {
            // 案件类型
            request({
                url: '/clue/category',
                method: 'GET'
            }).then(res => {
                if(res.code == 200) {
                    this.dataList = res.data.list || []
                }
            })
            // 案件类型
			request({
				url: `/user/push/category-list`,
				method: 'GET'
			}).then(res => {
				if(res.code == 200) {
					let list = res.data.list || []
                    list.forEach(obj => {
                        this.labelValue.push(obj.category_id)
                    });
				} else {
					this.$message.error(res.message);
				}
			})
        }
    }
}
</script>
<style lang="less" scoped>
    .clue-list{
        height: 100%;
        padding: 20px;
        border-radius: 8px;
        background: #fff;
        .clue-box{
            padding: 20px;
            .items{
                width: auto;
                min-width: 100px;
                height: 30px;
                padding: 0 10px;
                line-height: 30px;
                text-align: center;
                cursor: pointer;
                color: #383838;
                margin-right: 10px;
                margin-bottom: 10px;
                border-radius: 30px;
                background: rgba(232, 232, 232, 1);
            }
            .active{
                color: #fff;
                background: #2A82E4;
            }
        }
        .btn-box{
            text-align: right;
			width: 100%;
			.btn{
				font-size: 14px;
                padding: 0;
				color: #fff;
				width: 96px;
                height: 28px;
				text-align: center;
				line-height: 28px;
				border-radius: 25px;
			}
			.b-bg{
				background: #2967E3;
			}
			.l-bg{
				background: #00BAAD;
			}
            .gray{
                background: #A6A6A6;
            }
		}
    }
</style>